<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>TZ-追梦</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #box{
            width: 150px;
            height: 300px;
            border:1px dashed black;
            text-align: center;
            line-height: 300px;
        }
    </style>
</head>
<body>
    <div id="box"> 回收箱 </div>
    <script>
        box.ondragenter = function () {
            this.innerHTML = '释放鼠标';
        };
        box.ondragover = function(e){
            var e = e || event;
            e.preventDefault();
        };
        box.ondrop = function(e){
            var e = e || event;
            e.preventDefault();

            // 1获取文件信息
            var files = e.dataTransfer.files;
            //console.log(files);
            //console.log(files[0]);

            // 2创建读取文件的对象
            var oFile = new FileReader();

            //  3分析或读取 文件信息
            oFile.readAsDataURL(files[0]);

            oFile.onload = function(){
                //console.log(this.result);
                var oUl =document.createElement('ul');
                var oLi = document.createElement('li');
                var oImg = new Image();
                oImg.src =this.result;
                oLi.appendChild(oImg);
                oUl.appendChild(oLi);
                document.body.appendChild();
            }
        }
    </script>
</body>
</html>